<template>
  <v-touch v-on:swiperight="onSwipeRight">
  <div v-if="filminfo">

    <DetailHeader v-top :title="filminfo.name"></DetailHeader>
<!--    <van-icon name="arrow-left" @click="backtocinema"/>-->
    <div :style="{backgroundImage:'url('+filminfo.poster+')'}"
         style="height: 200px;background-size: cover;background: center"></div>
    {{filminfo.name}} {{filminfo.filmType.name}}
    <div>{{filminfo.category}}</div>
    <div>{{filminfo.premiereAt | dataFilter}}上映</div>
    <div>{{filminfo.nation}} | {{filminfo.runtime}}分钟</div>
    <div :class="isShow ? '' : 'synopsis'">{{filminfo.synopsis}}</div>
    <div style="text-align: center"><i class="glyphicon" :class="isShow ? 'glyphicon-chevron-up': 'glyphicon-chevron-down'" @click="isShow=! isShow"></i></div>
    <hr style="height: 10px;background: #F2F2F2">
    <h5>演职人员</h5>
    <!--DetailSwiper-->
    <Detail-swiper :perslide="4" swiperclass="swiper-actors">
      <div class="swiper-slide" v-for="(data,index) in filminfo.actors" :key="index" >
        <img :src="data.avatarAddress"/>
        <div style="text-align: center">
          <div>{{data.name}}</div>
          <div>{{data.role}}</div>
        </div>
      </div>
    </Detail-swiper>
    <hr style="height: 10px;background: #F2F2F2">
    <h5>剧照</h5>
    <!--DetailSwiper-->
    <Detail-swiper :perslide="2" swiperclass="swiper-photos">
      <div class="swiper-slide" v-for="(data,index) in filminfo.photos" :key="index">
       <img :src="data" style="height: 100px" @click="handlepreview(index)"/>
<!--        <div :style="{backgroundImage:'url('+data+')'}"-->
<!--             style="height: 100px;background-size: cover;background: center"></div>-->
        </div>
    </Detail-swiper>
    <hr>

  </div>
  </v-touch>
</template>

<script>
import http from '@/util/http'
import Vue from 'vue'
import moment from 'moment'
import DetailSwiper from '@/views/Detail/DetailSwiper'
import DetailHeader from '@/views/Detail/DetailHeader'
import { ImagePreview } from 'vant'
import { mapMutations } from 'vuex'
import VueTouch from 'vue-touch'
Vue.use(VueTouch, { name: 'v-touch' })
Vue.filter('dataFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})
// 自定义指令
Vue.directive('top', {
  inserted (el) {
    // console.log(el)
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.onscroll) > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})
export default {
  components: { DetailHeader, DetailSwiper },
  data () {
    return {
      filminfo: null,
      isShow: false
    }
  },
  methods: {
    ...mapMutations('TabbarModule', ['comeInDetailTheTabbarIsHide', 'comeInDetailTheTabbarIsShow']),
    handlepreview (index) {
      ImagePreview({
        images: this.filminfo.photos,
        startPosition: index,
        closeable: true
      })
    },
    onSwipeRight () {
      // console.log('往左滑')
      this.$router.back()
    }
    // backtocinema () {
    //   this.$router.back()
    // }
  },
  mounted () {
    // console.log(this.$route.params.myid)
    // console.log(this.$route.query.id)
    // 请求未完成之前展示一个toast
    // 当页面一进来时，我们隐藏tabbar
    // this.$store.commit('comeInDetailTheTabbarIsHide')
    this.comeInDetailTheTabbarIsHide()
    // this.$store.state.tabbarIsShow = false
    http({
      url: `/gateway?filmId=${this.$route.query.id}&k=2402001`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }

    }).then(res => {
      // console.log(res.data.data.film)
      this.filminfo = res.data.data.film
    })
  },
  beforeDestroy () {
    // this.$store.state.tabbarIsShow = true

    // this.$store.commit('comeInDetailTheTabbarIsShow')
    this.comeInDetailTheTabbarIsShow()
    // 然后在显示一个顶部返回按钮
  }

}
</script>

<style scoped lang="scss">
 .synopsis{
   height: 40px;
   overflow: hidden;
 }
 .swiper-slide{
   img{
     width: 100%;
   }
 }

</style>
